<template>
	<!-- 我的-钱包提现 -->
	<view class="WalletWithdrawal public">
		<view class="empty"></view>
		<view class="main">
			<view class="main-main">
				<view class="main-title">
					提现金额
				</view>
				<view class="main-input">
					<text>￥</text>
					<input type="number" value="200" placeholder="请输入提现金额" v-model="balance_money">
				</view>
				<view class="main-notes">
					<!-- 余额将提现至微信，可提现<text>1-3200.00元</text> -->
					当前余额{{ amountOfMoney }}元，<text @click="fullWithdrawal">全部提现</text>
				</view>
			</view>
		</view>
		<view class="way">
			<view class="way-main">
				<view class="way-title">
					提现方式
				</view>
				<view class="way-main-main">
					<view class="way-main-item">
						<view class="">
							收款人姓名
						</view>
						<view class="">
							<input type="text" placeholder="请输入收款人姓名" v-model="name">
						</view>
					</view>
					<view class="way-main-item">
						<view class="">
							账号
						</view>
						<view class="">
							<input type="text" placeholder="请输入收款人卡号" v-model="cardNumber">
						</view>
					</view>
					<view class="way-main-item">
						<view class="">
							银行
						</view>
						<view class="xuanbank">
							<picker :range="bank" :value="bank" @change="selectBanks" class="picker">
								<view class="">
									<view class="" v-if="selectBank == ''">
										<input type="text" placeholder="选择银行" disabled class="xuan">
									</view>
									<view class="bankz" v-if="selectBank !== ''">
										{{ bank[selectBank] }}
									</view>
								</view>
							</picker>
							<view class="">
								<uni-icons type="forward" size="27rpx" color="#D1D1D1"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button @click="withdrawal">确定</button>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			selectBank: '',
			balance_money: '',
			bank: ['中国农业银行', '农商银行', '中国银行', '中国邮政'],
			amountOfMoney: 0,
			name: '',
			cardNumber: '',
		}
	},
	onLoad() {
		this.accountInformation()
	},
	methods: {
		// 账户信息
		accountInformation() {
			$api.postAccountInformation({
			}).then(res => {
				this.amountOfMoney = res.data.data.balance_money
			})
		},
		withdrawal() {
			if (!this.balance_money || !this.name || !this.cardNumber || !this.bank[this.selectBank]) {
				uni.showToast({
					title: '输入框不能为空',
					icon: 'none',
					duration: 2000
				})
			} else {
				$api.postWithdrawal({
					apply_money: this.balance_money,
					transfer_type: 'bank',
					realname: this.name,
					bank_name: this.bank[this.selectBank],
					account_number: this.cardNumber
				}).then(res => {
					this.accountInformation()
					this.balance_money = 0
				})

			}


		},
		fullWithdrawal() {
			if (this.amountOfMoney != 0) {
				this.balance_money = this.amountOfMoney
			} else {
				uni.showToast({
					title: '很抱歉哦！您的金额为0元不能提现呢',
					icon: 'none',
					duration: 2000
				})
			}
		},
		selectBanks(e) {
			this.selectBank = e.detail.value
		}
	}
}
</script>

<style lang="less" scoped>
.WalletWithdrawal {
	background: #F7F7F7;

	// 空
	.empty {
		height: 17rpx;
	}

	.main {
		width: 698rpx;
		height: 310rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(10, 13, 47, 0.05);
		border-radius: 10rpx;
		margin: auto;

		.main-main {
			width: 628rpx;
			margin: auto;
		}

		.main-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #363C48;
			padding-top: 46rpx;
		}

		.main-input {
			display: flex;
			align-items: center;
			font-size: 72rpx;
			font-weight: 600;
			color: #363C48;
			border-bottom: 1px solid #E6E6E6;
			padding: 30rpx 0 10rpx 0;

			input {
				height: 72rpx;
			}
		}

		.main-notes {
			font-size: 30rpx;
			font-weight: 400;
			color: #717171;
			line-height: 80rpx;

			text {
				color: #F14500;
			}
		}
	}

	.way {
		width: 702rpx;
		height: 380rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(10, 13, 47, 0.05);
		border-radius: 10rpx;
		margin: auto;
		margin-top: 18rpx;

		.way-main {
			width: 638rpx;
			margin: auto;

			.way-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #262626;
				padding-top: 37rpx;
			}

			.way-main-main {
				width: 100%;

				.way-main-item {
					display: flex;
					align-items: center;
					width: 100%;
					height: 92rpx;
					border-bottom: 1px solid #E6E6E6;

					view:first-child {
						width: 200rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #262626;
					}

					view:last-child {
						display: flex;
						justify-content: flex-end;
						text-align: right;

						input {
							width: 450rpx;
							font-size: 28rpx;
							font-weight: 400;
						}

						.xuan {
							padding-right: 10rpx;
						}
					}

					.xuanbank {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						width: 100%;
						.bankz {
							text-align: right;
						}
					}
				}

				.way-main-item:last-child {
					border: none;
				}
			}
		}
	}

	.footer-button {
		padding-top: 114rpx;

		button {
			width: 684rpx;
			height: 80rpx;
			background: #F14500;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>